<style scoped lang="scss" type="text/scss">
  @import '~variables';

  .content{
    line-height: 200%;
  }
  .set-icon{
    bottom: 60px;
    right: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    background: rgba(#000,.4);
  }
  .bg-shadow {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(#000, .5);
    top: 0;
    left: 0;
  }
  .fixed-box{
    position: fixed;
    z-index: 2;
    /*top: 0;*/
    /*left: 0;*/
  }
  .top-c,.bottom-c{
    height: 50px;
    width: 100%;
    background: $white;
    line-height: 50px;
    position: fixed;
    left: 0;
    z-index: 3;
  }
  .top-c{
    top: 0;
  }
  .bottom-c{
    bottom: 0;
  }
  .back-icon{
    position: relative;
    left: 15px;

    &:before,&:after{
      border: 10px solid transparent;
      border-right: 10px solid #fff;
      position: absolute;
      top: 15px;
      left: 0;
      content: '';
      font-size: 0;
    }
    &:before{
      border-right-color: #ccc;
      left: -2px;
    }
  }
  .line-1{
    line-height: 1;
  }
  .add-book-btn{
    top: 150px;
    right: 0;
    background: #c9483c;
    color: #f1f1f1;
    box-shadow: 1px 1px 1px #666;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .btn-style{
    background: 0;
    border: 0 none;
  }
  .set-box {
    top: 50px;
    left: 0;
  }
  .font-num{
    /deep/ .mint-cell-value{
      width: 50%;
    }
  }
</style>

<template>
  <div @click="showOperate">
    <v-header class="pc-style"></v-header>
    <div class="main-style">
      <!--<Breadcrumb>-->
      <!--<BreadcrumbItem to="/">首页</BreadcrumbItem>-->
      <!--<BreadcrumbItem :to="{ path: `/${this.$route.params.code}` }">{{ $route.params.code }}</BreadcrumbItem>-->
      <!--<BreadcrumbItem>{{ $route.query.name }}</BreadcrumbItem>-->
      <!--</Breadcrumb>-->
      <div :class="{ 'position-fixed': isShadow }">
        <div class="tit-box width-100 padding position-relative bg-gray-1 pc-style">
          <div class="bg-color inline-block">
            <b class="font-s">背景颜色：</b>
            <ColorPicker v-model="bgColor" size="small" @on-change="changBg"></ColorPicker>
          </div>
          <div class="inline-block margin-left">
            <b class="font-s">字体大小：</b>
            <Button type="text" size="small" v-for="item in fwList" :key="item" @click="toggleFw(item)">{{ item }}</Button>
          </div>
          <div class="inline-block position-absolute" style="right: 0;">
            <Button type="text" size="small" v-if="isDay" @click="night">开启夜间模式</Button>
            <Button type="text" size="small" v-else @click="day">开启日间模式</Button>
          </div>
        </div>

        <div class="padding-top-l padding-bottom" :style="{ 'background': bgColor,'font-size': fontSize }">
          <h2 class="align-center margin-bottom-l" :style="{ 'color': color }">{{ data.title }}</h2>
          <p class="padding-left-xl padding-right-xl content pc-style" :style="{ 'color': color }">{{ data.content }}</p>
          <p class="content m-style" :style="{ 'color': color,'font-size': fontSize }">{{ data.content }}</p>
        </div>

        <div class="margin-top margin-bottom align-center">
          <Button :disabled="data.cid <= 1" @click="prev">上一章</Button>
          <Button @click="goList">返回目录</Button>
          <Button @click="next" :disabled="isLast">下一章</Button>
        </div>

        <div class="m-style">
          <div v-if="isShadow">
            <div class="bg-shadow" @click.stop="isShadow = false;isSet = false"></div>
            <div class="top-c">
              <div class="float-left">
                <i class="back-icon" @click="back"></i>
              </div>
              <div class="float-right flex" style="padding-top: 5px;">

                <div style="line-height: 20px;" class="align-center flex-item" @click="goRecharge">
                  <i class="iconfont icon-chongzhi"></i>
                  <span class="width-100 block margin-top-s line-1">充值</span>
                </div>

                <div style="line-height: 20px;" class="align-center flex-item margin-left-xl" @click="set">
                  <i class="iconfont icon-shezhi"></i>
                  <span class="width-100 block margin-top-s line-1">设置</span>
                </div>

                <div style="line-height: 20px;" class="align-center flex-item margin-left-xl margin-right-l" @click="goIndex">
                  <i class="iconfont icon-shouye"></i>
                  <span class="width-100 block margin-top-s line-1">首页</span>
                </div>

              </div>
            </div>

            <div class="set-box padding-left padding-right bg-white width-100 position-fixed border-top" v-if="isSet">
              <mt-cell title="字号" class="font-num">
                <mt-range v-model="fontNum" :min="12" :max="24" :step="1" class="width-100" @change="changeFontNum(fontNum)">
                  <!--<div slot="start">12</div>-->
                  <!--<div slot="end">24</div>-->
                </mt-range>
              </mt-cell>
            </div>

            <div class="add-book-btn position-fixed padding border-radius" @click="addBook">
              <Icon type="plus-round"></Icon>
              <button :disabled="disabled" class="btn-style color-white">加入书架</button>
            </div>
            <div class="bottom-c">
              <div class="flex align-center height-100">
                <div class="flex-item line-1"><i class="iconfont icon-shouye"></i><button class="width-100 block line-1 margin-top-s btn-style" :disabled="data.cid <= 1" @click="prev">上一章</button></div>
                <div class="flex-item line-1"><i class="iconfont icon-shouye"></i><button class="width-100 block line-1 margin-top-s btn-style" @click="goList">目录</button></div>
                <div class="flex-item line-1"><i class="iconfont icon-shouye"></i><button class="width-100 block line-1 margin-top-s btn-style" @click="next" :disabled="isLast">下一章</button></div>
              </div>
            </div>
            <div class="position-fixed bg-gray set-icon">
              <i class="iconfont icon-yejian color-white font-xl" style="line-height: 50px;" v-if="isDay" @click="night"></i>
              <i class="iconfont icon-rijian color-white font-xl" style="line-height: 50px;" v-if="!isDay" @click="day"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-footer class="pc-style"></v-footer>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        data: {},
        bgColor: '#fff',
        fontSize: '14px',
        color: '#444',
        fwList: ['特大','大','中','小'],
        isDay: true,
        prevDis: false,
        isLast: false,
        isShadow: false,
        disabled: false,
        fontNum: 14,
        isSet: false
      }
    },
    created () {
      this.fetchData()
      this.$http.get('/api/book/getBookDetail',{
        bid: this.$route.params.id
      })
        .then((res) => {
          if (res){
            if (this.$route.params.cid === res.result.total){
              this.isLast = true
            } else {
              this.isLast = false
            }
          }
        })
    },
//    mounted () {
//      if (screen.width < 768) {
//        document.body.style.backgroundColor = '#f0ebe4'
//      }
//    },
    beforeDestroy () {
      document.body.style.backgroundColor = ''
    },
    methods: {
      fetchData () {
        this.$http.get('/api/auth/status')
          .then((user) => {
            if (user) {
              this.$http.get('/api/book/getChapter', {
                cid: this.$route.params.cid
              })
                .then((res) => {
                  if (res) {
                    this.data = res.result
//                    if (this.data.coin > 0 && user.coin < this.data.coin) {
//                      this.$Modal.confirm({
//                        content: '请充值后再阅读本章内容',
//                        okText: '去充值',
//                        cancelText: '取消',
//                        onOk: () => {
//                          this.$router.push('/my/recharge')
//                        }
//                      })
//                    }
                  }
                })
                .catch((err) => {
//                  if (err) {
//                    this.$Modal.confirm({
//                      content: '请充值后再阅读本章内容',
//                      okText: '去充值',
//                      cancelText: '取消',
//                      onOk: () => {
//                        this.$router.push('/my/recharge')
//                      }
//                    })
//                  }
                  if (err.msg && err.msg === '请购买章节后阅读') {
                    this.$Modal.confirm({
                      content: '本章节需要购买才可继续阅读，确定购买？',
                      okText: '购买',
                      onOk: () => {
                        this.$http.post('/api/book/buyChapter',{
                          cid: this.$route.params.cid
                        })
                          .then((res) => {
                            if (res.result === '购买成功') {
                              this.$Message.success(res.result)
                              setTimeout(() => {
                                this.$router.go(0)
                              },1500)
                            }
                          })
                      }
                    })
                  }
                })
            }
          })

        if (sessionStorage.getItem('isDay') !== null || sessionStorage.getItem('isDay') !== ''){
          if (sessionStorage.getItem('isDay') === 'false') {
            this.isDay = false
          } else {
            this.isDay = true
          }

        } else {
          this.isDay = true
        }

        if (sessionStorage.getItem('fontSize') !== null || sessionStorage.getItem('fontSize') !== ''){
          this.fontSize = sessionStorage.getItem('fontSize')
          this.fontNum = parseInt(sessionStorage.getItem('fontSize'),10)
        } else {
          this.fontSize = '14px'
          this.fontNum = 14
        }

        if (sessionStorage.getItem('color') !== null || sessionStorage.getItem('color') !== ''){
          this.color = sessionStorage.getItem('color')
        } else {
          this.color = '#444'
        }

        if (sessionStorage.getItem('bgColor') !== null || sessionStorage.getItem('bgColor') !== ''){
          if (screen.width < 768) {
            document.body.style.backgroundColor = sessionStorage.getItem('bgColor')
            console.log(document.body.style.backgroundColor)
            this.bgColor = ''
            return false
          }
          this.bgColor = sessionStorage.getItem('bgColor')
        } else {
          if (screen.width < 768) {
            document.body.style.backgroundColor = '#f0ebe4'
            this.bgColor = ''
            return false
          }
          this.bgColor = '#ffffff'
        }
      },
      // 切换字体大小
      toggleFw (val) {
        switch (val) {
          case '特大':
            this.fontSize = '24px'
            break
          case '大':
            this.fontSize = '18px'
            break
          case '中':
            this.fontSize = '14px'
            break
          case '小':
            this.fontSize = '12px'
            break
          // no default
        }
        sessionStorage.setItem('fontSize',this.fontSize)
      },
      // 开启夜间模式
      night () {
        if (screen.width < 768) {
          document.body.style.backgroundColor = '#333'
          this.color = '#f1f1f1'
          this.isDay = false
          sessionStorage.setItem('bgColor',document.body.style.backgroundColor)
          sessionStorage.setItem('color',this.color)
          sessionStorage.setItem('isDay',this.isDay)
          return false
        }
        this.bgColor = '#555'
        this.color = '#fff'
        this.isDay = false
        sessionStorage.setItem('bgColor',this.bgColor)
        sessionStorage.setItem('color',this.color)
        sessionStorage.setItem('isDay',this.isDay)
      },
      // 开启日间模式
      day () {
        if (screen.width < 768) {
          document.body.style.backgroundColor = '#f0ebe4'
          this.color = '#333'
          this.isDay = true
          sessionStorage.setItem('bgColor',document.body.style.backgroundColor)
          sessionStorage.setItem('color',this.color)
          sessionStorage.setItem('isDay',this.isDay)
          return false
        }
        this.bgColor = '#fff'
        this.color = '#333'
        this.isDay = true
        sessionStorage.setItem('bgColor',this.bgColor)
        sessionStorage.setItem('color',this.color)
        sessionStorage.setItem('isDay',this.isDay)
      },
      // 改变背景色
      changBg (val) {
        console.log(val)
        if (this.color === '#fff') {
          this.color = '#444'
        }
        sessionStorage.setItem('bgColor',val)
      },
      // 上一章
      prev () {
        let prev = Number(this.$route.params.cid) - 1
        this.$router.push(`/${this.$route.params.code}/list/${this.$route.params.id}/${prev}`)
        this.fetchData()
      },
      // 下一章
      next () {
        let next = Number(this.$route.params.cid) + 1
        this.$router.push(`/${this.$route.params.code}/list/${this.$route.params.id}/${next}`)
        this.fetchData()
      },
      // 目录
      goList () {
        this.$router.push(`/${this.$route.params.code}/list/${this.$route.params.id}`)
      },
      // 移动端时，打开操作
      showOperate () {
        if (screen.width < 768) {
          this.isShadow = true
        }
      },
      // 去首页
      goIndex () {
        this.$router.push('/')
      },
      // 去充值
      goRecharge () {
        this.$router.push('/my/recharge')
      },
      // 返回
      back () {
        this.$router.go(-1)
      },
      // 加入书架
      addBook () {
        this.$http.post('/api/book/markBook',{
          bid: this.$route.params.id,
          isAdd: true
        })
          .then((res) => {
            if (res) {
              this.$Message.success('已加入书架')
              this.disabled = true
            }
          })
      },
      // 设置
      set () {
        this.isSet = !this.isSet
      },
      // 改变字号（移动端）
      changeFontNum (val) {
        this.fontSize = `${val}px`
        sessionStorage.setItem('fontSize',this.fontSize)
      }
    }
  }
</script>
